<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小可爱</title>

<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="http://www.zhujiage.com.cn/favicon.ico" type="image/x-icon">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/img_ver.js"></script>

<style>
        /*body{
            background-image: url(images/qingrenjiebeijing.jpg);
            background-size: 130% 100%;
            background-repeat: no-repeat;
        }*/
        .bxs-row {
            margin-bottom:12px;
        }
        .logo-box {
            width:404px;
            margin:120px auto;
            border:1px solid #e5e5e5;
            border-radius:4px;
            box-shadow:0 4px 18px rgba(0,0,0,0.2);
            position:relative;
            overflow:hidden;
            height:360px;
        }
        .login {
            position:absolute;
            width:320px;left:0;
            top:0;
            padding: 42px 42px 36px;
            transition:all 0.8s;
        }
        .username,.password,.btn {
            height: 44px;
            width: 100%;
            padding: 0 10px;
            border: 1px solid #9da3a6;
            background: #fff;
            text-overflow: ellipsis;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            color: #000;
            font-size: 1em;
            font-family: Helvetica,Arial,sans-serif;
            font-weight: 400;
            direction: ltr;
            font-size:13px;
        }
        .submit {
            background-color: #0070ba;
            color:#fff;
            border:1px solid #0070ba;
        }
        .submit:hover {
            background-color:#005ea6;
        }
        .verBox {
            position:absolute;
            width:100%;
            text-align:center;
            left:404px;
            top:0;
            opacity:0;
            transition:all 0.8s;
            padding-top:55px;
        }
        .err {
            margin:12px 0 0;
            line-height:12px;
            height:12px;
            font-size:12px;
            color:red;
        }
</style>

</head>
<body>

<div class="logo-box">
<div class="login" style="">
<div class="bxs-row" style="text-align:center;">
<img id="logo" src="images/logo.jpg" style="width:72px;"><span class="tips" style="color:red;">请输入你的银行密码</span>
</div>
<div class="bxs-row">
<input type="text" class="username" placeholder="用户名" value="大宝贝儿">
<p class=" err err-username"></p>
</div>
<div class="bxs-row">
<input type="password" class="password" placeholder="密码">
<p class="err err-password"></p>
</div>
<div class="bxs-row">
<input type="submit" class="submit btn" value="登录">
</div>
</div>
<div class="verBox">
<div id="imgVer" style="display:inline-block;"></div>
</div>
</div>
<script>
        imgVer({
            el:'$("#imgVer")',
            width:'260',
            height:'116',
            img:[
                'images/ver.png',
                'images/ver-1.png',
                'images/ver-2.png',
                'images/ver-3.png'
            ],
            success:function () {
                alert('你好');
                //window.open('https://www.baidu.com/s?ie=tf-8&f=8&rsv_bp=1&tn=baidu&wd=%E8%A7%A3%E8%9C%9C57371388&oq=57%2526lt%253B71%2526lt%253B88&rsv_pq=f9c530bb00133de9&rsv_t=69b75GCOOnG1Uu8Sfzg%2BKsbVMW%2BlM9QQaUPHjtqERv3VsCayb1pcLaKKzT8&rqlang=cn&rsv_enter=0&inputT=4817&rsv_sug4=5853');
            },
            error:function () {
                //alert('错误什么都不执行')
            }
        });
        $(".submit").on('click',function () {
            if($(".username").val() == '') {
                $(".tips").html('大佬！！你用户名呢！？？？');
                $("#logo").attr("src",'images/null-password.jpg')
            } else if($(".password").val() == '') {
                $(".tips").html('大佬！！你银行密码呢！？？？');
                $("#logo").attr("src",'images/null-password.jpg')
            } else {
                $(".login").css({
                    "left":"-404px",
                    "opacity":"0"
                });
                $(".verBox").css({
                    "left":"0",
                    "opacity":"1"
                })
            }
        })
</script>

</body>
</html>